<!-- 首页 -->
<template>
  <!-- 首页被拆分为了七个组件，利于维护 -->
  <div>
    <!-- 三级联动组件的使用  ：三级联动已经注册为全局组件，因此不需要引入<TypeNav></TypeNav> -->
    <TypeNav></TypeNav>
    <!-- 列表组件的使用  ListContainer.vue -->
    <ListContainer></ListContainer>
    <!-- 今日推荐组件  Recommend.vue -->
    <Recommend></Recommend>
    <!-- 热卖排行组件 Rank.vue -->
    <Rank></Rank>
    <!-- 猜你喜欢：Like.vue -->
    <Like></Like>
    <!-- 楼层组件：有两层 -->
    <!-- :floorData="floor"   把每一层整个数据传递到floor.vue组件中去那边进行渲染 -->
    <Floor v-for="(floor) in floorList" :key="floor.id" :floorData="floor" ></Floor>
  
    <!-- 商标组件 -->
    <Brand></Brand>
  </div>
</template>

<script>
import ListContainer from "./ListContainer/index.vue"
import Recommend from "./Recommend/index.vue";
import Rank from "./Rank/index.vue";
import Like from "./Like/index.vue";
import Floor from "./Floor/index.vue";
import Brand from "./Brand/index.vue";
import { mapActions, mapState } from "vuex";
export default {
  name: 'HomeIndex',
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand
  },
  computed:{
    ...mapState('floor',['floorList'])
  },
  methods: {
    ...mapActions('floor', ['getApiFloorList'])
  },
  async mounted() {
    await this.getApiFloorList()
    
  }


}
</script>
<style lang='less' scoped></style>